<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Api文档</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/library/layui/css/layui.css" media="all">
</head>
<style>
    .layui-tab-content{
        padding: 10px 0 10px 0;
    }
    .layui-card{
        box-shadow:0 1px 2px 0 rgba(0,0,0,0.3)
    }
    .layui-form-item .layui-input-inline{
        width: 300px;
    }
</style>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="margin-bottom: 20px">
        <div class="layui-logo">Api文档</div>
        <div class="layui-nav layui-layout-right layui-form layui-inline">
            <div class="layui-form-item" style="margin-top: 10px;">
                <label class="layui-form-label">ApiUrl:</label>
                <div class="layui-input-inline">
                    <input type="text" name="api_url" id="api_url" lay-verify="api_url" autocomplete="off" placeholder="http://www.domain.com/" class="layui-input">
                </div>
                <button class="layui-btn" lay-submit="" lay-filter="api_url">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md2">
            <div class="layui-collapse">
                {foreach $docslist as $k=>$v}
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">{$k}</h2>
                    {foreach $v as $api}
                    <div class="layui-colla-content">
                        <a href="#{$api.id}" onclick="show('{$api.id}')"><p>{$api.title}</p></a>
                    </div>
                    {/foreach}
                </div>
                {/foreach}
            </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md9">
            {foreach $docslist as $k=>$v}
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>{$k}</legend>
            </fieldset>
            {foreach $v as $ak=>$api}
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" id="{$api.id}">{$api.method} {$api.title} {$api.route}</h2>
                    <div class="layui-colla-content" id="{$api.id}_content">
                        <div class="layui-tab">
                            <ul class="layui-tab-title">
                                <li class="layui-this">基础信息</li>
                                <li>在线测试</li>
                                <li>返回说明</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-card" style="background-color: #F2F2F2;">
                                        <div class="layui-card-body">
                                            {$api.summary}
                                        </div>
                                    </div>
                                    <div class="layui-card">
                                        <div class="layui-card-header" style="background-color: #F2F2F2;">Headers</div>
                                        <div class="layui-card-body">
                                            {if $api.headerslist}
                                            <table class="layui-table" lay-skin="line">
                                                <colgroup>
                                                    <col width="150">
                                                    <col width="150">
                                                    <col width="200">
                                                    <col>
                                                </colgroup>
                                                <thead>
                                                <tr>
                                                    <th>名称</th>
                                                    <th>类型</th>
                                                    <th>必选</th>
                                                    <th>描述</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {foreach $api.headerslist as $hk=>$hv}
                                                <tr>
                                                    <td>{$hv.name}</td>
                                                    <td>{$hv.type}</td>
                                                    <td>{if $hv.required}是{else}否{/if}</td>
                                                    <td>{$hv.description}</td>
                                                </tr>
                                                {/foreach}
                                                </tbody>
                                            </table>
                                            {else}
                                            无
                                            {/if}
                                        </div>
                                    </div>
                                    <div class="layui-card">
                                        <div class="layui-card-header" style="background-color: #F2F2F2;">参数</div>
                                        <div class="layui-card-body">
                                            {if $api.paramslist}
                                            <table class="layui-table" lay-skin="line">
                                                <colgroup>
                                                    <col width="150">
                                                    <col width="150">
                                                    <col width="200">
                                                    <col>
                                                </colgroup>
                                                <thead>
                                                <tr>
                                                    <th>名称</th>
                                                    <th>类型</th>
                                                    <th>必选</th>
                                                    <th>描述</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {foreach $api.paramslist as $pk=>$pv}
                                                <tr>
                                                    <td>{$pv.name}</td>
                                                    <td>{$pv.type}</td>
                                                    <td>{if $pv.required}是{else}否{/if}</td>
                                                    <td>{if $pv.sample}{$pv.description} - 例:{$pv.sample}{else}{$pv.description}{/if}</td>
                                                </tr>
                                                {/foreach}
                                                </tbody>
                                            </table>
                                            {else}
                                            无
                                            {/if}
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="layui-card">
                                        <div class="layui-card-header" style="background-color: #F2F2F2;">参数</div>
                                        <div class="layui-card-body">
                                            <form class="layui-form-pane" method="{$api.method}" action="{$api.route}" id="test_inline_{$api.id}">
                                                {foreach $api.paramslist as $pk=>$pv}
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">{$pv.name}</label>
                                                    <div class="layui-input-block">
                                                        <input type="{if ($pv.type == 'file')}file{else}text{/if}" name="{$pv.name}" autocomplete="off" placeholder="{if $pv.sample}{$pv.description} - 例:{$pv.sample}{else}请输入{$pv.description}{/if}" class="layui-input">
                                                    </div>
                                                </div>
                                                {/foreach}
                                                <div class="layui-form-item">
                                                    <div class="layui-input-block">
                                                        <a class="layui-btn" href="javascript:void(0);" onclick="test_inline({$api.id})">提 交</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="layui-card" style="display:none;" id="response_card_{$api.id}">
                                        <div class="layui-card-header" style="background-color: #F2F2F2;">响应输出</div>
                                        <div class="layui-card-body">
                                            <pre class="layui-code" id="response_headers_{$api.id}"></pre>
                                            <pre class="layui-code" id="response_{$api.id}"></pre>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="layui-card">
                                        <pre class="layui-code">{$api.return}</pre>
                                    </div>
                                    <div class="layui-card">
                                        <div class="layui-card-header" style="background-color: #F2F2F2;">详细说明</div>
                                        <div class="layui-card-body">
                                            {if $api.returnparamslist}
                                            <table class="layui-table" lay-skin="line">
                                                <colgroup>
                                                    <col width="150">
                                                    <col width="150">
                                                    <col width="200">
                                                    <col>
                                                </colgroup>
                                                <thead>
                                                <tr>
                                                    <th>名称</th>
                                                    <th>类型</th>
                                                    <th>举例</th>
                                                    <th>描述</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {foreach $api.returnparamslist as $pk=>$pv}
                                                <tr>
                                                    <td>{$pv.name}</td>
                                                    <td>{$pv.type}</td>
                                                    <td>{$pv.sample}</td>
                                                    <td>{$pv.description}</td>
                                                </tr>
                                                {/foreach}
                                                </tbody>
                                            </table>
                                            {else}
                                            无
                                            {/if}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
            {/foreach}
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/library/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/library/layui/layui_config.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/library/jquery_3.3.1.js" charset="utf-8"></script>
<script>
    layui.use(['element','code','form'], function(){
        let element = layui.element;

        layui.code({
            elem:"pre",
            title:'返回示例',
            about:false
        });

        if (storage) {
            $('#api_url').val(storage.getItem('api_url'));
        } else {
            alert('Your browser does not support local storage');
        }

        layui.form.on('submit(api_url)', function(data){
            if (storage) {
                storage.setItem('api_url', data.field.api_url);
            } else {
                alert('Your browser does not support local storage');
            }
        });

        let ids = {$ids};
        let key;
        for(key in ids){
            layui.form.on('submit(test_inline_'+ids[key]+')', function(data){
                let id = data.field.ajax_id;
                let method = data.field.ajax_method;
                let url = storage.getItem('api_url') ? storage.getItem('api_url') + data.field.ajax_route : data.field.ajax_route;
                $.ajax({
                    type: method,
                    url: url,
                    data: data.field,
                    dataType: 'json',
                    async: false,
                    success: function (data, textStatus, xhr) {
                        if (typeof data === 'object') {
                            var str = JSON.stringify(data, null, 2);
                            $('#response_'+id).html(syntaxHighlight(str));
                        } else {
                            $('#response_'+id).html(data || '');
                        }
                        $('#response_headers_'+id).html('HTTP ' + xhr.status + ' ' + xhr.statusText + '<br/><br/>' + xhr.getAllResponseHeaders());
                        $('#response_card_'+id).show();
                    },
                    error: function (xhr) {
                        try {
                            var str = JSON.stringify($.parseJSON(xhr.responseText), null, 2);
                        } catch (e) {
                            var str = xhr.responseText;
                        }
                        $('#response_headers_'+id).html('HTTP ' + xhr.status + ' ' + xhr.statusText + '<br/><br/>' + xhr.getAllResponseHeaders());
                        $('#response_'+id).html(syntaxHighlight(str));
                        $('#response_card_'+id).show();
                    }
                });
            });
        }
    });

    function show(id){
        let css = $('#'+id+'_content').attr('class');
        if( css.indexOf('layui-show') == -1 ){
            $('#'+id).click();
        }
    }

    let storage = (function () {
        let storage;
        try {
            storage = window.localStorage
            return storage;
        } catch (exception) {
        }
    }());

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

    function test_inline(id){
        let formData = new FormData();
        $('#test_inline_'+id).find('input').each(function (i, input) {
            if ($(input).attr('type') == 'file') {
                formData.append($(input).attr('name'), $(input)[0].files[0]);
            } else {
                formData.append($(input).attr('name'), $(input).val())
            }
        });
        let url = storage.getItem('api_url') ? storage.getItem('api_url') + $('#test_inline_'+id).prop('action') : $('#test_inline_'+id).prop('action');
        $.ajax({
            url: url,
            data: $('#test_inline_'+id).prop('method').toLowerCase() == 'get' ? $('#test_inline_'+id).serialize() : formData,
            type: $('#test_inline_'+id).prop('method') + '',
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (data, textStatus, xhr) {
                if (typeof data === 'object') {
                    var str = JSON.stringify(data, null, 2);
                    $('#response_'+id).html(syntaxHighlight(str));
                } else {
                    $('#response_'+id).html(data || '');
                }
                $('#response_headers_'+id).html('HTTP ' + xhr.status + ' ' + xhr.statusText + '<br/><br/>' + xhr.getAllResponseHeaders());
                $('#response_card_'+id).show();
            },
            error: function (xhr) {
                try {
                    var str = JSON.stringify($.parseJSON(xhr.responseText), null, 2);
                } catch (e) {
                    var str = xhr.responseText;
                }
                $('#response_headers_'+id).html('HTTP ' + xhr.status + ' ' + xhr.statusText + '<br/><br/>' + xhr.getAllResponseHeaders());
                $('#response_'+id).html(syntaxHighlight(str));
                $('#response_card_'+id).show();
            }
        });
        return false;
    }
</script>
</html>